<template>
  <div class="app-container">
    <div>
      <el-input placeholder="请输入编号" v-model="numberId" clearable class="stock-input">
        <template slot="prepend">编号</template>
        <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
      </el-input>
      <el-button type="text">查询结果：{{stockData.length}}条</el-button>
    </div>
    <div>
      <el-table
        :data="stockData"
        border
        max-height="500"
        size="mini"
        style="width: 100%">

        <el-table-column
          type="index">
        </el-table-column>

        <el-table-column
          prop="library_id"
          label="编号">
        </el-table-column>

        <el-table-column
          prop="library_moneyin"
          label="成本"
          width="80">
        </el-table-column>

        <el-table-column
          prop="library_money"
          label="定价"
          width="80">
        </el-table-column>

        <el-table-column
          prop="library_count"
          label="件数"
          width="50">
        </el-table-column>

        <el-table-column
          prop="library_creatdata"
          label="创建日期">
        </el-table-column>

        <el-table-column
          prop="library_name"
          label="备注">
        </el-table-column>

        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, stockData)"
              type="text"
              size="small">
              移除
            </el-button>
            <!-- <el-button
              type="text"
              size="small">
              编辑
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

export default {
  watch: {
  },

  data () {
    return {
      numberId: '',
      stockData: []
    }
  },

  mounted () {
    this.$store.dispatch('SearchStock', { id: '' }).then((res) => {
      this.stockData = res.data
    }).catch((err) => {
      console.log(err)
    })
  },

  methods: {
    search () {
      this.$store.dispatch('SearchStock', { id: this.numberId }).then((res) => {
        this.stockData = res.data
      }).catch((err) => {
        console.log(err)
      })
    },
    deleteRow (index, rows) {
      this.$store.dispatch('DelStock', { id: rows[index].id }).then((res) => {
        rows.splice(index, 1)
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.stock {
  &-input {
    margin-bottom: 10px;
  }
}
</style>
